<script setup>
import { ElMessage } from "element-plus";
import defaultAvatar from '@/assets/default_avatar.png'
import {computed, ref} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter()
const store = useStore()
const userInfo = computed(() => store.getters.userInfo)

// 我的动态
import MyDynamic from './MyDynamic.vue'
import MyCollect from './MyCollect.vue'
import MyLike from './MyLike.vue'
const componentName = computed(() => {
  switch (searchParams.value.classify) {
    case 1:
      return MyDynamic
    case 3:
      return MyCollect
    case 4:
      return MyLike
    default:
      return MyDynamic
  }
})
const categoryList = ref([
  {
    name: '我的动态',
    id: 1,
    active_svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_125_24736"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_125_24736)"><g><path d="M15.48029375,8.606198671875C15.44439375,8.223388671875,15.10529375,7.929638671875,14.44749375,7.715578671875C14.41469375,6.942138671875,14.24589375,6.192138671875,13.94589375,5.481198671875C13.62089375,4.712448671875,13.15529375,4.021828671874999,12.56159375,3.4280786718750003C11.96779375,2.8343286718750003,11.27719375,2.368701671875,10.50843375,2.043700671875C9.71155375,1.706201671875,8.86624375,1.535888671875,7.99437375,1.535888671875C7.12249375,1.535888671875,6.27718375,1.706201671875,5.48030375,2.043700671875C4.71155375,2.368701671875,4.02093375,2.8343286718750003,3.42718375,3.4280786718750003C2.83343375,4.021828671874999,2.36780375,4.712448671875,2.04280375,5.481198671875C1.70530375,6.278078671875,1.53499575,7.123388671875,1.53499575,7.995258671875C1.53499575,8.279638671875,1.55374575,8.562448671875,1.58968375,8.840578671875C1.30062075,8.984328671875,1.06937075,9.131198671875,0.90530775,9.279638671875C0.65374565,9.506198671875,0.53812065,9.748388671875,0.56155819,9.999948671875C0.60843315,10.503078671875,1.1834327500000001,10.856198671875,2.31468375,11.070258671875C2.61155375,11.617088671875,2.98343375,12.117088671875,3.42874375,12.562488671875C4.022493750000001,13.156188671875,4.71312375,13.621788671875,5.48187375,13.946788671875C6.27874375,14.284288671875,7.12405375,14.454588671875,7.99593375,14.454588671875C8.86780375,14.454588671875,9.71312375,14.284288671875,10.50999375,13.946788671875C11.27879375,13.621788671875,11.96939375,13.156188671875,12.56159375,12.562488671875C13.15379375,11.968688671875,13.62089375,11.278078671875,13.94589375,10.509328671875C14.03189375,10.307758671875,14.10529375,10.103078671875,14.16939375,9.895268671875C15.09439375,9.499948671875,15.52409375,9.074948671875,15.48029375,8.606198671875ZM7.99437375,2.318701671875C11.12559375,2.318701671875,13.67249375,4.865578671874999,13.67249375,7.996828671875C13.67249375,8.515578671875,13.60219375,9.020268671875,13.47089375,9.498388671875C13.35219375,9.540578671875,13.22249375,9.584328671875,13.08339375,9.628078671875C11.78029375,10.040578671875,10.02405375,10.364008671875,8.136553750000001,10.540578671875C6.24905375,10.717138671875,4.46155375,10.723388671875,3.10530375,10.560888671875C3.04124375,10.553078671875,2.97874375,10.545258671875,2.91780375,10.537448671875C2.53343375,9.773388671875,2.31780375,8.910888671875,2.31780375,7.998388671875C2.31780375,4.865578671874999,4.86468375,2.318700671875,7.99437375,2.318701671875ZM1.18186875,9.942138671875C1.17718175,9.893698671875,1.27405675,9.721828671875,1.70687375,9.484328671875C1.77718375,9.779638671875,1.86780375,10.068698671875,1.97874375,10.353078671875C1.3568687499999998,10.182758671875,1.1881187500000001,9.999948671875,1.18186875,9.942138671875ZM7.99437375,13.673388671875C6.05687375,13.673388671875,4.34280375,12.696788671875,3.31780375,11.210888671875C3.92249375,11.271828671875,4.59749375,11.301508671875,5.32093375,11.301508671875C6.22093375,11.301508671875,7.19437375,11.254638671875,8.19437375,11.160888671875C10.09593375,10.982758671875,11.87249375,10.657758671875,13.20839375,10.242138671875C12.33659375,12.259288671875,10.32718375,13.673388671875,7.99437375,13.673388671875ZM14.35839375,9.107768671875C14.40059375,8.867138671875,14.42879375,8.624948671875,14.44279375,8.379638671875C14.76309375,8.509328671875,14.85529375,8.624948671875,14.85839375,8.665578671875C14.86309375,8.714018671875,14.76469375,8.879638671875,14.35839375,9.107768671875Z" fill="#0A6FFF" fill-opacity="1"/></g><g><path d="M3.97787825,7.345261171875C4.00287825,7.351511171875,4.02787825,7.354641171875,4.05131525,7.354641171875C4.19194025,7.354641171875,4.32006525,7.259331171875,4.35444025,7.115581171875C4.41069025,6.881201171875,4.49194025,6.653081171875,4.59350325,6.434331171875C4.66694025,6.278081171875,4.59819025,6.092141171874999,4.44194025,6.018701171875C4.28569025,5.945261171875,4.09975225,6.014011171875,4.02631525,6.170261171875C3.90756525,6.424951171875,3.81381485,6.693701171875,3.74662757,6.967141171874999C3.70756505,7.134331171875,3.80912755,7.303081171875,3.97787825,7.345261171875ZM4.7513112500000005,5.551511171875C4.81069125,5.604641171875,4.88569125,5.631201171875,4.95913125,5.631201171875C5.04506125,5.631201171875,5.13100125,5.596821171875,5.19194125,5.526511171875C5.89350125,4.742141171875,6.89975125,4.293701171875,7.94975125,4.293701171875C8.12163125,4.293701171875,8.26225125,4.153076171875,8.26225125,3.981201171875C8.26225125,3.809326171875,8.12163125,3.668701171875,7.94975125,3.668701171875C7.32319125,3.668701171875,6.7200612500000005,3.799951171875,6.15444125,4.057763171875C5.60913125,4.307763171875,5.12788125,4.660889171875,4.72631525,5.110891171875C4.61225325,5.239011171875,4.62319025,5.435891171875,4.7513112500000005,5.551511171875Z" fill="#0A6FFF" fill-opacity="1"/></g></g></svg>',
    svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_358_53022"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_358_53022)"><g><path d="M15.48029375,8.606198671875C15.44439375,8.223388671875,15.10529375,7.929638671875,14.44749375,7.715578671875C14.41469375,6.942138671875,14.24589375,6.192138671875,13.94589375,5.481198671875C13.62089375,4.712448671875,13.15529375,4.021828671874999,12.56159375,3.4280786718750003C11.96779375,2.8343286718750003,11.27719375,2.368701671875,10.50843375,2.043700671875C9.71155375,1.706201671875,8.86624375,1.535888671875,7.99437375,1.535888671875C7.12249375,1.535888671875,6.27718375,1.706201671875,5.48030375,2.043700671875C4.71155375,2.368701671875,4.02093375,2.8343286718750003,3.42718375,3.4280786718750003C2.83343375,4.021828671874999,2.36780375,4.712448671875,2.04280375,5.481198671875C1.70530375,6.278078671875,1.53499575,7.123388671875,1.53499575,7.995258671875C1.53499575,8.279638671875,1.55374575,8.562448671875,1.58968375,8.840578671875C1.30062075,8.984328671875,1.06937075,9.131198671875,0.90530775,9.279638671875C0.65374565,9.506198671875,0.53812065,9.748388671875,0.56155819,9.999948671875C0.60843315,10.503078671875,1.1834327500000001,10.856198671875,2.31468375,11.070258671875C2.61155375,11.617088671875,2.98343375,12.117088671875,3.42874375,12.562488671875C4.022493750000001,13.156188671875,4.71312375,13.621788671875,5.48187375,13.946788671875C6.27874375,14.284288671875,7.12405375,14.454588671875,7.99593375,14.454588671875C8.86780375,14.454588671875,9.71312375,14.284288671875,10.50999375,13.946788671875C11.27879375,13.621788671875,11.96939375,13.156188671875,12.56159375,12.562488671875C13.15379375,11.968688671875,13.62089375,11.278078671875,13.94589375,10.509328671875C14.03189375,10.307758671875,14.10529375,10.103078671875,14.16939375,9.895268671875C15.09439375,9.499948671875,15.52409375,9.074948671875,15.48029375,8.606198671875ZM7.99437375,2.318701671875C11.12559375,2.318701671875,13.67249375,4.865578671874999,13.67249375,7.996828671875C13.67249375,8.515578671875,13.60219375,9.020268671875,13.47089375,9.498388671875C13.35219375,9.540578671875,13.22249375,9.584328671875,13.08339375,9.628078671875C11.78029375,10.040578671875,10.02405375,10.364008671875,8.136553750000001,10.540578671875C6.24905375,10.717138671875,4.46155375,10.723388671875,3.10530375,10.560888671875C3.04124375,10.553078671875,2.97874375,10.545258671875,2.91780375,10.537448671875C2.53343375,9.773388671875,2.31780375,8.910888671875,2.31780375,7.998388671875C2.31780375,4.865578671874999,4.86468375,2.318700671875,7.99437375,2.318701671875ZM1.18186875,9.942138671875C1.17718175,9.893698671875,1.27405675,9.721828671875,1.70687375,9.484328671875C1.77718375,9.779638671875,1.86780375,10.068698671875,1.97874375,10.353078671875C1.3568687499999998,10.182758671875,1.1881187500000001,9.999948671875,1.18186875,9.942138671875ZM7.99437375,13.673388671875C6.05687375,13.673388671875,4.34280375,12.696788671875,3.31780375,11.210888671875C3.92249375,11.271828671875,4.59749375,11.301508671875,5.32093375,11.301508671875C6.22093375,11.301508671875,7.19437375,11.254638671875,8.19437375,11.160888671875C10.09593375,10.982758671875,11.87249375,10.657758671875,13.20839375,10.242138671875C12.33659375,12.259288671875,10.32718375,13.673388671875,7.99437375,13.673388671875ZM14.35839375,9.107768671875C14.40059375,8.867138671875,14.42879375,8.624948671875,14.44279375,8.379638671875C14.76309375,8.509328671875,14.85529375,8.624948671875,14.85839375,8.665578671875C14.86309375,8.714018671875,14.76469375,8.879638671875,14.35839375,9.107768671875Z" fill="#3D3D3D" fill-opacity="1"/></g><g><path d="M3.97787825,7.345261171875C4.00287825,7.351511171875,4.02787825,7.354641171875,4.05131525,7.354641171875C4.19194025,7.354641171875,4.32006525,7.259331171875,4.35444025,7.115581171875C4.41069025,6.881201171875,4.49194025,6.653081171875,4.59350325,6.434331171875C4.66694025,6.278081171875,4.59819025,6.092141171874999,4.44194025,6.018701171875C4.28569025,5.945261171875,4.09975225,6.014011171875,4.02631525,6.170261171875C3.90756525,6.424951171875,3.81381485,6.693701171875,3.74662757,6.967141171874999C3.70756505,7.134331171875,3.80912755,7.303081171875,3.97787825,7.345261171875ZM4.7513112500000005,5.551511171875C4.81069125,5.604641171875,4.88569125,5.631201171875,4.95913125,5.631201171875C5.04506125,5.631201171875,5.13100125,5.596821171875,5.19194125,5.526511171875C5.89350125,4.742141171875,6.89975125,4.293701171875,7.94975125,4.293701171875C8.12163125,4.293701171875,8.26225125,4.153076171875,8.26225125,3.981201171875C8.26225125,3.809326171875,8.12163125,3.668701171875,7.94975125,3.668701171875C7.32319125,3.668701171875,6.7200612500000005,3.799951171875,6.15444125,4.057763171875C5.60913125,4.307763171875,5.12788125,4.660889171875,4.72631525,5.110891171875C4.61225325,5.239011171875,4.62319025,5.435891171875,4.7513112500000005,5.551511171875Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg>'
  },
  {
    name: '我的收藏',
    id: 3,
    active_svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_358_54676"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_358_54676)"><g><path d="M7.672535,6.9467421875C7.332535,6.9467421875,7.007875,6.8794021875,6.756535,6.7554021875L1.750535,4.2920721875C1.407875,4.1234021875,1.2105320000000002,3.8527421875,1.208532,3.5500721875C1.2065320000000002,3.2434021875,1.405204,2.9660721875,1.753875,2.7887421875L6.812535,0.2200701875C7.079205,0.0847421875,7.422535,0.0107421875,7.780535,0.0107421875C8.120535,0.0107421875,8.445205,0.0787421875,8.696535,0.2020701875L13.702575,2.6654021875C14.045175,2.8340721875,14.242575,3.1054021875,14.244575,3.4080721875C14.246575,3.7147421875,14.047875,3.9920721875,13.699175,4.1687421875L8.640535,6.7374021875C8.373875,6.8727421875,8.030535,6.9474021875,7.671875,6.9474021875L7.672535,6.9467421875ZM2.119205,3.5420721875L7.125875,6.0060721875C7.261875,6.0727421875,7.460535,6.1114021875,7.671205,6.1114021875C7.897205,6.1114021875,8.111875000000001,6.0680721875,8.261205,5.9920721875L13.319875,3.4234021875C13.324175,3.4212621875,13.328375,3.4190421875,13.332575,3.4167421875L8.325875,0.9533981875C8.189875,0.8867421875,7.990535,0.8473981875,7.779875,0.8473981875C7.554535,0.8473981875,7.339875,0.8907421875,7.190535,0.9667421875L2.132535,3.5347421875C2.128305,3.5369421875,2.124085,3.5391621875,2.119875,3.5414021875L2.119205,3.5420721875ZM6.632535,15.9900421875C6.459205,15.9900421875,6.279205,15.9440421875,6.094535,15.8547421875L6.083875,15.8487421875L1.610531,13.5020421875C1.0752030000000001,13.2374421875,0.671875,12.6707421875,0.671875,12.1820421875L0.671875,5.8554021875C0.671875,5.4120721875,0.9978750000000001,5.0900721875,1.445875,5.0900721875C1.619203,5.0900721875,1.799205,5.1354021875,1.983875,5.2254021875L1.994535,5.2307421875L6.467875,7.5774021875C7.003205,7.8420721875,7.406535,8.4087421875,7.406535,8.8980721875L7.406535,15.2247421875C7.406535,15.6680421875,7.081205,15.9900421875,6.632535,15.9900421875ZM6.466535,15.1047421875C6.508535,15.1247421875,6.542535,15.1367421875,6.569205,15.1440421875L6.569205,8.8987421875C6.569205,8.7634021875,6.380535,8.4667421875,6.094535,8.3267421875L6.083875,8.3214021875L1.61186,5.9747621875C1.5789840000000002,5.9585421875,1.5445950000000002,5.9455821875,1.509188,5.9360821875L1.509188,12.1814421875C1.509188,12.3167421875,1.698515,12.6134421875,1.983855,12.7534421875L1.994515,12.7587421875L6.466545,15.1053421875L6.466535,15.1047421875ZM9.037875,15.9900421875C8.589205,15.9900421875,8.264535,15.6680421875,8.264535,15.2247421875L8.264535,8.8980721875C8.264535,8.4087421875,8.667205,7.8420721875,9.202535,7.5780721875L13.686575,5.2254121875C13.870575,5.1354121875,14.051175,5.0900721875,14.224575,5.0900721875C14.672575,5.0900721875,14.997875,5.4120721875,14.997875,5.8554021875L14.997875,12.1814421875C14.997875,12.6707421875,14.595175,13.2374421875,14.059875,13.5014421875L9.575875,15.8547421875C9.409215,15.9403421875,9.225185,15.9866421875,9.037875,15.9900421875L9.037875,15.9900421875ZM14.059175,5.9747421875L9.576545,8.3267421875C9.290535,8.4667421875,9.101205,8.7634021875,9.101205,8.8987421875L9.101205,15.1440421875C9.136825,15.1343421875,9.171425,15.1211421875,9.204535,15.1047421875L13.687175,12.7527421875C13.972575,12.6133421875,14.161875,12.3167421875,14.161875,12.1813421875L14.161875,5.9360721875C14.126475,5.9456221875,14.092075,5.9585721875,14.059175,5.9747421875Z" fill="#1790FD" fill-opacity="1"/></g></g></svg>',
    svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_125_24746"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_125_24746)"><g><path d="M7.672535,6.9467421875C7.332535,6.9467421875,7.007875,6.8794021875,6.756535,6.7554021875L1.750535,4.2920721875C1.407875,4.1234021875,1.2105320000000002,3.8527421875,1.208532,3.5500721875C1.2065320000000002,3.2434021875,1.405204,2.9660721875,1.753875,2.7887421875L6.812535,0.2200701875C7.079205,0.0847421875,7.422535,0.0107421875,7.780535,0.0107421875C8.120535,0.0107421875,8.445205,0.0787421875,8.696535,0.2020701875L13.702575,2.6654021875C14.045175,2.8340721875,14.242575,3.1054021875,14.244575,3.4080721875C14.246575,3.7147421875,14.047875,3.9920721875,13.699175,4.1687421875L8.640535,6.7374021875C8.373875,6.8727421875,8.030535,6.9474021875,7.671875,6.9474021875L7.672535,6.9467421875ZM2.119205,3.5420721875L7.125875,6.0060721875C7.261875,6.0727421875,7.460535,6.1114021875,7.671205,6.1114021875C7.897205,6.1114021875,8.111875000000001,6.0680721875,8.261205,5.9920721875L13.319875,3.4234021875C13.324175,3.4212621875,13.328375,3.4190421875,13.332575,3.4167421875L8.325875,0.9533981875C8.189875,0.8867421875,7.990535,0.8473981875,7.779875,0.8473981875C7.554535,0.8473981875,7.339875,0.8907421875,7.190535,0.9667421875L2.132535,3.5347421875C2.128305,3.5369421875,2.124085,3.5391621875,2.119875,3.5414021875L2.119205,3.5420721875ZM6.632535,15.9900421875C6.459205,15.9900421875,6.279205,15.9440421875,6.094535,15.8547421875L6.083875,15.8487421875L1.610531,13.5020421875C1.0752030000000001,13.2374421875,0.671875,12.6707421875,0.671875,12.1820421875L0.671875,5.8554021875C0.671875,5.4120721875,0.9978750000000001,5.0900721875,1.445875,5.0900721875C1.619203,5.0900721875,1.799205,5.1354021875,1.983875,5.2254021875L1.994535,5.2307421875L6.467875,7.5774021875C7.003205,7.8420721875,7.406535,8.4087421875,7.406535,8.8980721875L7.406535,15.2247421875C7.406535,15.6680421875,7.081205,15.9900421875,6.632535,15.9900421875ZM6.466535,15.1047421875C6.508535,15.1247421875,6.542535,15.1367421875,6.569205,15.1440421875L6.569205,8.8987421875C6.569205,8.7634021875,6.380535,8.4667421875,6.094535,8.3267421875L6.083875,8.3214021875L1.61186,5.9747621875C1.5789840000000002,5.9585421875,1.5445950000000002,5.9455821875,1.509188,5.9360821875L1.509188,12.1814421875C1.509188,12.3167421875,1.698515,12.6134421875,1.983855,12.7534421875L1.994515,12.7587421875L6.466545,15.1053421875L6.466535,15.1047421875ZM9.037875,15.9900421875C8.589205,15.9900421875,8.264535,15.6680421875,8.264535,15.2247421875L8.264535,8.8980721875C8.264535,8.4087421875,8.667205,7.8420721875,9.202535,7.5780721875L13.686575,5.2254121875C13.870575,5.1354121875,14.051175,5.0900721875,14.224575,5.0900721875C14.672575,5.0900721875,14.997875,5.4120721875,14.997875,5.8554021875L14.997875,12.1814421875C14.997875,12.6707421875,14.595175,13.2374421875,14.059875,13.5014421875L9.575875,15.8547421875C9.409215,15.9403421875,9.225185,15.9866421875,9.037875,15.9900421875L9.037875,15.9900421875ZM14.059175,5.9747421875L9.576545,8.3267421875C9.290535,8.4667421875,9.101205,8.7634021875,9.101205,8.8987421875L9.101205,15.1440421875C9.136825,15.1343421875,9.171425,15.1211421875,9.204535,15.1047421875L13.687175,12.7527421875C13.972575,12.6133421875,14.161875,12.3167421875,14.161875,12.1813421875L14.161875,5.9360721875C14.126475,5.9456221875,14.092075,5.9585721875,14.059175,5.9747421875Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg>'
  },
  {
    name: '我的点赞',
    id: 4,
    svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14.00049877166748" height="13.394976615905762" viewBox="0 0 14.00049877166748 13.394976615905762"><g><path d="M12.395,4.10798L8.257,4.10798C8.4535,3.41648,8.553,2.80198,8.553,2.26098C8.553,1.03348,7.431,-0.142023,6.357,0.0139768C5.41,0.151477,4.958,0.949977,4.958,1.97548L4.958,2.90198C4.958,4.09048,4.0485,5.10398,2.892,5.21548L1.0525,5.21248C0.47122,5.21248,0,5.6837,0,6.26498L0,12.3425C0,12.924,0.471,13.395,1.0525,13.395L11.243,13.395C12.0142,13.395,12.6763,12.8466,12.82,12.089L13.972,6.01148C14.1591,5.02295,13.4011,4.10798,12.395,4.10798ZM1,12.3425L1,6.26498C1,6.23598,1.0235,6.21248,1.0525,6.21248L2.25,6.21248L2.25,12.395L1.0525,12.395C1.0235,12.395,1,12.3715,1,12.3425ZM12.9895,5.82548L11.8375,11.903C11.7833,12.1884,11.5337,12.395,11.243,12.395L3.25,12.395L3.25,6.16848C4.81885,5.86898,5.9547,4.49865,5.958,2.90148L5.958,1.97548C5.958,1.38848,6.1465,1.05498,6.5005,1.00398C6.923,0.942477,7.553,1.60298,7.553,2.26148C7.553,2.84448,7.4045,3.57398,7.102,4.44448C6.98918,4.76941,7.23053,5.10859,7.5745,5.10848L12.395,5.10848C12.774,5.1085,13.0597,5.45302,12.9895,5.82548Z" fill="#3D3D3D" fill-opacity="1"/></g></svg>',
    active_svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14.00049877166748" height="13.394976615905762" viewBox="0 0 14.00049877166748 13.394976615905762"><g><path d="M12.395,4.10798L8.257,4.10798C8.4535,3.41648,8.553,2.80198,8.553,2.26098C8.553,1.03348,7.431,-0.142023,6.357,0.0139768C5.41,0.151477,4.958,0.949977,4.958,1.97548L4.958,2.90198C4.958,4.09048,4.0485,5.10398,2.892,5.21548L1.0525,5.21248C0.47122,5.21248,0,5.6837,0,6.26498L0,12.3425C0,12.924,0.471,13.395,1.0525,13.395L11.243,13.395C12.0142,13.395,12.6763,12.8466,12.82,12.089L13.972,6.01148C14.1591,5.02295,13.4011,4.10798,12.395,4.10798ZM1,12.3425L1,6.26498C1,6.23598,1.0235,6.21248,1.0525,6.21248L2.25,6.21248L2.25,12.395L1.0525,12.395C1.0235,12.395,1,12.3715,1,12.3425ZM12.9895,5.82548L11.8375,11.903C11.7833,12.1884,11.5337,12.395,11.243,12.395L3.25,12.395L3.25,6.16848C4.81885,5.86898,5.9547,4.49865,5.958,2.90148L5.958,1.97548C5.958,1.38848,6.1465,1.05498,6.5005,1.00398C6.923,0.942477,7.553,1.60298,7.553,2.26148C7.553,2.84448,7.4045,3.57398,7.102,4.44448C6.98918,4.76941,7.23053,5.10859,7.5745,5.10848L12.395,5.10848C12.774,5.1085,13.0597,5.45302,12.9895,5.82548Z" fill="#1790FD" fill-opacity="1"/></g></svg>'
  }
])
const searchParams = ref({
  classify: 1,
})
const handleCheckCategory = (item) => {
  searchParams.value.classify = item.id
}
import UploadImage from "@/components/UploadImage.vue";
import {http} from "@/api";
/**
 * 发布
 */
const dialogVisible = ref(false)
const formRef = ref(null)
const formModel = ref({
  id: undefined,
  nickname: '',
  username: '',
  image: '',
  phone: '',
})
const formRules = ref({
  nickname: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  username: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})
const handleEdit = () => {
  dialogVisible.value = true
  formModel.value = {
    ...store.getters.userInfo
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 发送请求
      http.user.update({
        ...formModel.value,
      }).then(res => {
        dialogVisible.value = false
        ElMessage.success('修改成功')
        store.dispatch('getUserInfo')
      })
    } else {
      return false
    }
  })
}
/**
 * 修改密码
 */
const dialogVisible2 = ref(false)
const formRef2 = ref(null)
const formModel2 = ref({
  newPassword: '',
  passwordConfirm: '',
})
const formRules2 = ref({
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  passwordConfirm: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    // 校验两次密码是否一致
    { validator: (rule, value, callback) => {
        if (value !== formModel2.value.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur' }
  ],
})
const handleEditPassword = () => {
  dialogVisible2.value = true
}
const handleSubmit2 = () => {
  formRef2.value.validate((valid) => {
    if (valid) {
      // 发送请求
      http.user.update({
        id: store.getters.userInfo.id,
        password: formModel2.value.newPassword
      }).then(res => {
        dialogVisible2.value = false
        ElMessage.success('修改成功,请重新登录')
        store.dispatch('resetState')
        router.replace('/login')
      })
    } else {
      return false
    }
  })
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="编辑个人资料"
      width="800px"
  >
    <el-form :model="formModel" :rules="formRules" ref="formRef" label-position="top">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="头像" style="width: 100%" prop="">
            <UploadImage v-model:image="formModel.image" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号" prop="username">
            <el-input clearab v-model="formModel.username" placeholder="请输入账号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input clearab v-model="formModel.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nickname">
            <el-input clearab v-model="formModel.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号" prop="username">
            <el-input clearab v-model="formModel.username" disabled placeholder="请输入账户"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="">
            <el-button type="text" @click="handleEditPassword">修改密码</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">
              提交
            </el-button>
          </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible2"
      title="修改密码"
      width="600px"
  >
    <el-form :model="formModel2" :rules="formRules2" ref="formRef2" label-position="top">
      <el-form-item label="新密码" prop="newPassword">
        <el-input clearable type="password" v-model="formModel2.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="passwordConfirm">
        <el-input clearable type="password" v-model="formModel2.passwordConfirm"></el-input>
      </el-form-item>
      <!--      <el-form-item label="手机号" prop="mobile">-->
      <!--        <el-input clearable v-model="formModel2.mobile"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="验证码" style="margin-bottom: 0" prop="code">-->
      <!--        <div class="f-r a-c" style="width: 100%">-->
      <!--          <div class="f-g">-->
      <!--            <el-input clearable v-model="formModel2.code">-->
      <!--              <template #suffix>-->
      <!--                <el-button type="text">发送验证码</el-button>-->
      <!--              </template>-->
      <!--            </el-input>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-form-item>-->
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit2">
              提交
            </el-button>
          </span>
    </template>
  </el-dialog>

  <div class="userinfo">
    <div class="userinfo-content">
      <div class="userinfo-header f-r a-c">
        <el-avatar :size="80" :src="userInfo.avatarUrl || defaultAvatar"></el-avatar>
        <div class="userinfo-details f-c">
          <div class="userinfo-nick f-r">
            <span>{{ userInfo.nickname }}</span>
          </div>
          <div class="userinfo-mobile">{{ userInfo.phone || '' }}</div>
        </div>
        <div class="userinfo-button" @click="handleEdit">
          编辑个人资料
        </div>

      </div>
      <div class="user-details f-r">
        <div class="f-s left">
          <div class="custom-tabs">
            <div
                v-for="item in categoryList"
                :key="item.id"
                :class="['f-r a-c custom-tab-item', searchParams.classify === item.id ? 'active' : '']"
                @click="handleCheckCategory(item)">
              <div class="custom-tab-item-icon f-r a-c" v-html="searchParams.classify === item.id ? item.active_svg : item.svg"></div>
              <span style="margin-left: 18px">
              {{ item.name }}
            </span>
            </div>
          </div>
        </div>
        <div class="f-g middle">
          <component :is="componentName"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userinfo {
  width: 100%;
  min-height: 100%;
  background-color: rgb(240,242,248);
  .userinfo-content {
    .middle {
      border-radius: 8px;
      background: #FFFFFF;
      padding: 14px 0;
      padding-top: 0;
    }
    .left {
      margin-right: 34px;
      flex-shrink: 0;
      width: 268px;
      border-radius: 8px;
      background: #FFFFFF;
      padding: 14px 0;
      overflow: auto;
      .custom-tabs {
        .custom-tab-item {
          height: 39px;
          padding: 10px 35px;
          font-family: PingFang SC;
          font-size: 18px;
          font-weight: normal;
          line-height: 24px;
          color: #3D3D3D;
          border-left: 2px solid transparent;
          cursor: pointer;
          margin: 16px 0;
          &.active {
            background: #F0F7FF;
            border-left-color: #1790FD;
            color: #1790FD;
            svg path {
              fill: #007aff;
            }
          }
        }
      }
    }

    .userinfo-header{
      height: 142px;
      border-radius: 8px;
      opacity: 1;
      background: linear-gradient(180deg, #8DAEF7 3%, #FFFFFF 48%);
      padding: 0 36px;
      position: relative;
      margin-bottom: 16px;
    }
    .city-button {
      height: 25px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.2);
      padding: 0 15px;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: 25px;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      top: 70px;
      right: 36px;
    }
    .userinfo-button {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      color: #1772F6;
      height: 34px;
      line-height: 34px;
      border-radius: 4px;
      padding: 0 16px;
      border: 1px solid #1772F6;
      position: absolute;
      right: 36px;
      bottom: 32px;
      cursor: pointer;
      text-align: center;
    }
    .userinfo-details {
      height: 70px;
      margin-left: 30px;
      justify-content: flex-end;
      .userinfo-mobile {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #8491A5;
      }
      .userinfo-nick{
        font-family: PingFang SC;
        font-size: 22px;
        font-weight: normal;
        line-height: 28px;
        color: #191B1F;
        margin-bottom: 18px;
        position: relative;
        align-items: flex-end;
        .sex {
          font-family: PingFang SC;
          font-size: 16px;
          line-height: 16px;
          font-weight: normal;
          color: #8491A5;
          margin-left: 15px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>